<template>
  <div class="col center">
    <div
      class="col center border"
      style="
        min-width: 800px;
        width: 60%;
        background: #fff;
        margin: 12px;
        padding: 12px;
      "
    >
      <view_articleVue ref="viewArticle" />
      <div style="width: 100%; margin: 32px">
        <span style="font-size: x-large; font-weight: 600"> 现任领导 </span>
        <div class="col center">
          <el-carousel
            class="center"
            style="width: 80%; min-width: 600px; margin: 24px"
            type="card"
            indicator-position="outside"
          >
            <el-carousel-item
              v-for="item in leaderList"
              :key="item.id"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <div class="col center" style="width: 360px; height: 100%">
                <span
                  style="
                    font-weight: 500;
                    font-size: medium;
                    color: blue;
                    margin: 6px;
                    width: 100%;
                    word-break: break-all;
                    text-align: center;
                  "
                  >{{ item.header }}</span
                >
                <div class="col center" style="width: 360px">
                  <el-image
                    style="width: 100%; height: 200px"
                    :src="item.url"
                    fit="cover"
                  />
                </div>
                <span
                  style="
                    margin: 6px;
                    width: 100%;
                    word-break: break-all;
                    text-align: center;
                  "
                  >{{ item.footer }}</span
                >
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div
        class="row"
        style="justify-content: start; width: 100%; margin: 32px"
      >
        <span class="rules" @click="toRules">
          <span style="font-size: x-large; font-weight: 600"> 研究会章程 </span>
          <span> 了解更多 > </span>
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
import view_articleVue from './view_article.vue'
import { useRouter } from 'vue-router'
const viewArticle = ref()
const rulesArticleId = ref()
const router = useRouter()
const leaderList = ref<any>([])
onMounted(() => {
  // 根据学会介绍类型获取文章
  axios
    .get('/api/getEssayByType', {
      headers: {
        Authorization: `Bearer ${window.localStorage.getItem('token')}`,
      },
      params: {
        type: '学会介绍',
      },
    })
    .then((res) => {
      console.log(res.data.data)

      console.log('id:' + res.data.data[0].id)

      viewArticle.value.getArticleById(res.data.data[0].id)
    })
  // 获取所有领导
  axios.get('/api/getAllLeader').then((res) => {
    leaderList.value = res.data.data
  })
})
// 获取研究会章程
const toRules = () => {
  axios
    .get('/api/getEssayByType', {
      headers: {
        Authorization: `Bearer ${window.localStorage.getItem('token')}`,
      },
      params: {
        type: '研究会章程',
      },
    })
    .then((res) => {
      console.log(res.data.data)
      console.log('id:' + res.data.data[0].id)
      rulesArticleId.value = res.data.data[0].id
      router.push({
        name: 'article',
        query: {
          articleId: rulesArticleId.value,
        },
      })
    })
}
</script>

<style scoped>
.rules {
  width: 240px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.rules:hover {
  color: blue;
}
</style>
